<template>
    <div class="rank-page">
        <div class="rank-l">
            <div class="top">
                <div class="top-line">
                    <div class="top-tabs">
                        <a :class="{'active':tab==1}" @click="chooseTab(1)">游戏榜</a>
                        <a :class="{'active':tab==2}" @click="chooseTab(2)">截图榜</a>
                        <a :class="{'active':tab==3}" @click="chooseTab(3)">作品榜</a>
                        <a :class="{'active':tab==4}" @click="chooseTab(4)">文章榜</a>
                        <a :class="{'active':tab==5}" @click="chooseTab(5)">收藏榜</a>
                    </div>
                    <div class="filter">
                        <DropDown :list="styles" :value.sync="rankParams.style" :width="114" placeholder="全部风格" v-if="tab==1"/> 
                        <DropDown class="rank-ddl" :list="ranks" :value.sync="rankParams.sort" :width="100" placeholder="日榜" /> 
                    </div>
                </div>
                <div class="top-mini-tip">{{ tab!=5?'按浏览+收藏+喜欢+评论等权重计算 · 每 20 分钟更新':'按图集关注人数计算 · 每 20 分钟更新' }}</div>
            </div>
            <div class="content-list-area">
                <div class="item" :class="{'no-data':!item.id}" v-for="(item,idx) in rankList" :key="idx" @click="handleShowInfo(idx,item)">
                    <template v-if="item.id">
                        <div class="sort-num" :class="[idx<4?'sort_'+(idx+1):'']">{{ idx+1 }}</div>
                            <div class="center-box">
                                <a class="img-box" v-if="tab!=5">
                                    <img loading="lazy" :srcset="item.srcsets" v-lazy="item.lazy" @error="loadError">
                                </a>
                                <div class="c-img-box" v-else>
                                    <div class="img-one">
                                        <img loading="lazy" :srcsets="item.covers[0].srcsets" v-lazy="item.covers[0].lazy" v-if="item.covers&&item.covers.length>0">
                                    </div>
                                    <div class="img-rs">
                                        <div class="ccimg-box">
                                            <img loading="lazy" :srcsets="item.covers[1].srcsets" v-lazy="item.covers[1].lazy" v-if="item.covers&&item.covers.length>1">
                                        </div>
                                        <div class="ccimg-box">
                                            <img loading="lazy" :srcsets="item.covers[2].srcsets" v-lazy="item.covers[2].lazy" v-if="item.covers&&item.covers.length>2">
                                        </div>
                                    </div>
                                </div>
                                <div class="basic">
                                    <a class="title" :title="item.title">{{item.title||item.article&&item.article.title}}</a>
                                    <div class="bot">
                                        <div class="tags" v-if="tab==1">{{item.device}}{{convertCateDesc(item.category_id)}}{{ item.style?'/'+item.style:'' }}</div>
                                        <div class="tags img-emoji-nums" v-else-if="tab==2">
                                            <i class="icon emoj-18">{{item.emoji1}}</i>
                                            <i class="icon emoj-10">{{item.emoji2}}</i>
                                            <i class="icon emoj-16">{{item.emoji3}}</i>
                                            <i class="icon emoj-6">{{item.emoji4}}</i>
                                            <i class="icon emoj-24">{{item.emoji5}}</i>
                                        </div>
                                        <div class="tags work-tags" v-else-if="tab==3||tab==4">
                                            <template v-if="item.tags">
                                                <span class="tag" v-for="(tag,idx) in item.tags.split(',')" :title="tag" v-if="idx<4">{{tag}}</span>
                                            </template>
                                            <!-- <span class="tag">Gui</span>
                                            <span class="tag">FangCM</span> -->
                                        </div>
                                        <div class="folder" v-else-if="tab==5">
                                            <div class="f-type-row">
                                                <span class="f-type" :class="['ftp_'+item.type]">{{folderTypeEnum[item.type]}}</span>
                                            </div>
                                            <div class="f-desc">{{item.content}}</div>
                                        </div>
                                        <el-popover popper-class="gm-info-pop" placement="top" trigger="hover" >
                                            <i class="sm-tip" slot-content>新增浏览量</i>
                                            <span slot="reference" class="see">+{{item.views||0}}</span>
                                        </el-popover>
                                    </div>
                                </div>
                            </div>
                            <div class="ops">
                                <template v-if="tab!=5">
                                    <el-popover popper-class="gm-info-pop" placement="top" trigger="hover" >
                                        <i class="sm-tip" slot-content>收藏</i>
                                        <a slot="reference" class="collect" @click.stop="handleShowFav(item)">{{item.collect_count}}</a>
                                    </el-popover>
                                    <el-popover popper-class="gm-info-pop" placement="top" trigger="hover" >
                                        <i class="sm-tip" slot-content>喜欢</i>
                                        <a slot="reference" class="fav" :class="{'active':item.praise}" @click.stop="(e)=>{handlePraise(item,e)}">{{item.praise_count}}</a>
                                    </el-popover>
                                </template>
                                <a class="atn" :class="{'active':item.fan}" @click.stop="handleFollowFolder(item)" v-else>
                                    <span>{{item.fan?'已关注':'关注'}}</span>
                                    <i>{{item.fans}}</i>
                                </a>
                            </div>
                    </template>
                </div>
                
                <div class="no-more-text" v-if="!hasRankMore&&!rankLoading&&rankList.length>0">没有更多了</div>
                <div class="pro-bot-loading" v-if="rankLoading">
                    <i class="el-icon-loading"></i>
                </div>
            </div>
        </div>
        <div class="rank-r custom-scroll" @scroll="loadMoreMember">
            <div class="panel-tit">热门作者</div>
            <div class="list-box">
                <div class="list-item" v-for="(item, i) in list" :key="i" :class="{ 'no-data': !item.id }">
                    <template v-if="item.id">
                        <div class="left">
                            <a class="img-box" :href="'/user/' + item.id" @click.prevent="toUcenter(item.id)">
                                <img loading="lazy" :srcset="item.srcsets" v-lazy="item.lazy" @error="loadError"/>
                            </a>
                            <div class="basic">
                                <a class="name" :href="'/user/' + item.id"
                                    @click.prevent="toUcenter(item.id)">{{ item.userName }}
                                    <el-popover popper-class="gm-info-pop" placement="top-start" trigger="hover"  v-for="tag in item.tagsList">
                                                <i class="sm-tip" slot-content>{{tag.title}}</i>
                                                <img slot="reference" loading="lazy" class="u-m-tag" :src="tag.image" alt="">
                                                </el-popover>
                                </a>
                                <div class="nums"><span class="num">粉丝<i>{{ item.fansStr }}</i></span><span
                                        class="num">人气<i>{{ item.seeStr }}</i></span></div>
                            </div>
                        </div>
                        <a class="follow-btn" :class="{ 'active': item.isSubscribe == 1 }"
                            @click.stop="handleFollow(item)">{{ item.isSubscribe == 0 ? '关注' : '已关注' }}</a>
                    </template>
                </div>
                <div class="pro-bot-loading" v-if="isLoading">
                    <i class="el-icon-loading"></i>
                </div>
            </div>
        </div>
        <!-- <div class="top">
            <router-link class="left-back" to="/"></router-link>
        </div> -->
        <!-- <div class="sub-logo">

        </div>
        <div class="sub-tit">
            社区贡献者
        </div>
        <div class="tit">
            感谢所有支持和帮助GAMEUI成长的伙伴们
        </div> -->

        <el-drawer :with-header="false" destroy-on-close :modal="false" append-to-body :visible.sync="showInfo"
            direction="btt">
            <!-- 游戏详情 -->
            <gameInfo @close="onInfoClose" v-if="pageType == 'game'" :id="currentId" />
            <!-- 作品详情 -->
            <workInfo @close="onInfoClose" v-else-if="pageType == 'work'" :id="currentId" @prev="onPrev" @next="onNext" />
            <!-- 文章详情 -->
            <articleInfo @close="onInfoClose" v-else-if="pageType == 'article'" :id="currentId" />
        </el-drawer>

        <a-modal v-model="showFav" destroyOnClose centered :footer="null" :closable="false" width="471px">
            <Fav :favmodule="favBy" @close="showFav = false" :foldertype="foldertype" :imgids="currentIds" :articleid="favId"
            @favsucc="onFavSucc" />
        </a-modal>

        <ImgDetail @close="onImgInfoClose" :imgurl="currentImgUrl" :imgid="currentId" :olist="rankList" :viewidx="curViewidx" v-if="showImg"/>
    </div>
</template>
<script>
import Fav from '@/components/Fav'
import gameInfo from '@/components/gameInfo'
import articleInfo from '@/components/articleinfo'
import workInfo from '@/components/workinfo'
import DropDown from '@/components/dropdown'
import api from '@/api/api'
export default {
    data() {
        return {
            allGTypes:[],
            scrollPosition:0,
            folderTypeEnum: {
                1: '图片集收藏夹',
                0: '单图收藏夹',
                2: '短视频收藏夹',
                3: '未知类型收藏夹'
            },
            currentImgUrl:'',
            curViewidx:-1,
            showImg:false,
            favId:'',
            currentIds:[],
            foldertype:-1,
            favBy:'',
            showFav:false,
            curFullPath: '',
            currentIdx:-1,
            pageType:'',
            currentId:'',
            showInfo:false,
            isLoading:true,
            tab:1,
            styles:[],
            ranks:[{title:'日榜',value:'day_rank'},{title:'周榜',value:'week_rank'},{title:'月榜',value:'month_rank'},{title:'总榜',value:'aeon_rank'}],
            hasMore: true,
            scrollLoaded: false,
            listparams:{
                style:'',
                sort:'day_rank'
            },
            params: {
                pageNum: 1,
                pageSize: 20,
                userId: '',
                showTags: '人气最多',
                isAsc: 'desc',
                orderByColumn: 'see'
            },
            list: [{}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}],
            rankLoading:true,
            rankParams:{
                pageNum:1,
                pageSize:15,
                sort:'day_rank'
            },
            pageTypeEnum:{
                1:'game',
                2:'img',
                3:'work',
                4:'article'
            },
            favModuleEnum:{
                1:'GAME',
                2:'IMG',
                3:'WORK',
                4:'ARTICLE'
            },
            nextPageEnum: {
                '': '/',
                1: '/collection/games',
                0: '/collection/imgs',
                2: '/collection/videos'
            },
            praiseTypeEnum:{
                1:0,
                2:4,
                3:0,
                4:0
            },
            rankType:['','games','images','works','articles','collections'],
            rankList:[],
            scrollRankLoaded:false,
            hasRankMore:true,
            starParam:{
                isAnimating:false,
                lastTime:0,
                CONFIG:{
                    particleCount: {
                        mobile: 15,
                        tablet: 20, 
                        desktop: 25
                    },
                    cooldown: 1500
                }
            },
            fullScPraiseParam:{
                isAnimating:false,
                lastTime:0,
                CONFIG:{
                particleCount: {
                    mobile: 15,
                    tablet: 20, 
                    desktop: 25
                },
                cooldown: 1500
                }
            }
        }
    },
    components:{DropDown,gameInfo,articleInfo,workInfo,Fav,
        ImgDetail: () => import('@/components/ImgDetail')
    },
    watch:{
        'rankParams.sort':function(){
            this.handleSearch();
        },
        'rankParams.style':function(){
            this.handleSearch();
        }
    },
    methods: {
        convertCateDesc(_id){
            if(_id){
                let items=this.allGTypes.filter(r=>{return r.value==_id});
                return items.length>0?'/'+items[0].title:'';
            }
            else{
                return '';
            }
        },
        async handleFollowFolder(item) {
            let ckPass=this.$bhelper.checkLogin(this);
            if(!ckPass)return;
            if (!item.fan) {
                let res = await api.followFolder({ explorerId: item.id });
                // let res = await api.followFolder(item.id);
                if (res.code == 0) {
                    item.fans++;
                    item.fan = true;
                    this.$amessage.success('关注+1，灵感不断！');
                }
            } else {
                let res = await api.cancelFollowFolder({ explorerId: item.id });
                // let res = await api.cancelFollowFolder(item.id);
                if (res.code == 0) {
                    item.fans--;
                    item.fan = false;
                    this.$amessage.success('取关成功');
                }
            }
        },
        onImgInfoClose(){
            window.history.pushState({}, 0,this.curFullPath);
            document.body.style.overflow='inherit';
            this.showImg=false;
        },
        getParticleCount() {
            const width = window.innerWidth;
            if (width <= 480) return this.starParam.CONFIG.particleCount.mobile;
            if (width <= 768) return this.starParam.CONFIG.particleCount.tablet;
            return this.starParam.CONFIG.particleCount.desktop;
        },
        getRandomNumber(min, max) {
            return Math.random() * (max - min) + min;
        },
        createHearts(e) {
            let that=this;
            
            const confettiContainer = document.createElement('div');
            confettiContainer.className = 'confetti-container';

            let _parent=document.querySelector('.rank-page');
            _parent.appendChild(confettiContainer);

            const now = Date.now();
            if (this.fullScPraiseParam.isAnimating || now - this.fullScPraiseParam.lastTime < this.fullScPraiseParam.CONFIG.cooldown) return;
            
            this.fullScPraiseParam.isAnimating = true;
            this.fullScPraiseParam.lastTime = now;

            // showToast();
            if(e.target){
                const btn =e.target;
                btn.style.animation = 'btn-success 0.5s ease';
                setTimeout(() => btn.style.animation = '', 500);
            }

            const particleCount = this.getParticleCount();
            const viewportWidth = window.innerWidth;
            const spacing = viewportWidth / particleCount;

            const fragment = document.createDocumentFragment();
            let activeParticles = particleCount;

            for(let i = 0; i < particleCount; i++) {
                const heart = document.createElement('div');
                heart.className = 'heart';
                heart.textContent = '❤';
                
                const xPos = i * spacing + this.getRandomNumber(-20, 20);
                heart.style.left = `${xPos}px`;
                
                const duration = this.getRandomNumber(2, 3);
                heart.style.animationDuration = `${duration}s`;

                heart.addEventListener('animationend', () => {
                    heart.remove();
                    if (--activeParticles === 0) {
                        that.fullScPraiseParam.isAnimating = false;
                    }
                }, { once: true });

                fragment.appendChild(heart);
            }

            confettiContainer.appendChild(fragment);
        },
        createRing(likeContainer) {
            const ring = document.createElement('div');
            ring.className = 'ring';
            ring.style.animation = 'ringExpand 0.6s ease-out forwards';
            likeContainer.appendChild(ring);
            setTimeout(() => ring.remove(), 600);
        },
        createParticles(likeContainer) {
            const particleCount = 12;
            const colors = ['#ff5c84', '#ff89a8', '#ffb4b4', '#ffffff'];

            for (let i = 0; i < particleCount; i++) {
                const particle = document.createElement('div');
                particle.className = 'particle';

                const angle = (i / particleCount) * 2 * Math.PI;
                const distance = 60 + Math.random() * 40;
                const tx = Math.cos(angle) * distance;
                const ty = Math.sin(angle) * distance;

                particle.style.setProperty('--tx', `${tx}px`);
                particle.style.setProperty('--ty', `${ty}px`);
                particle.style.animation = 'explode 0.8s ease-out forwards';
                particle.style.background = colors[Math.floor(Math.random() * colors.length)];

                const size = 4 + Math.random() * 6;
                particle.style.width = `${size}px`;
                particle.style.height = `${size}px`;

                likeContainer.appendChild(particle);
                setTimeout(() => particle.remove(), 800);
            }
        },
        createPlusOne(likeContainer) {
            const plus = document.createElement('div');
            plus.className = 'plus-one';
            plus.innerHTML = '<span style="color: #ffffff;">+</span><span style="color: #ffffff;">1</span>';
            plus.style.left = '50%';
            plus.style.top = '50%';
            plus.style.animation = 'floatUp 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards';

            likeContainer.appendChild(plus);
            // setTimeout(() => plus.remove(), 1000);
        },
        async handlePraise(item,e){
            let ckPass = this.$bhelper.checkLogin(this);
            if (!ckPass) return;
            
            if(item.praise){
                let res = await api.delPraise({ type: this.praiseTypeEnum[this.tab], praiseId: item.id });
                if (res.code == 0) {
                    item.praise=false;
                    item.praise_count -= 1;
                    this.$amessage.success('取消喜欢~')
                }
            }else{
                let res = await api.addPraise({ type: this.praiseTypeEnum[this.tab], praiseId: item.id });
                if (res.code == 0) {
                    let likeContainer = e.target;
                    likeContainer.classList.remove('heart-bounce');
                    void likeContainer.offsetWidth;

                    this.createHearts(e);

                    this.$bhelper.addCirRecord('FAV');

                    this.$bhelper.addCirRecord('FAV-'+this.favModuleEnum[this.tab]);

                    this.$store.dispatch('setLeftMenu',[])

                    this.createRing(likeContainer);
                    this.createParticles(likeContainer);
                    this.createPlusOne(likeContainer);

                    likeContainer.classList.add('heart-bounce');

                    item.praise=true;
                    item.praise_count += 1;

                    this.$amessage.success('已喜欢，品味不错哦～')
                }
            }
        },
        handleShowFav(item){
            let ckPass = this.$bhelper.checkLogin(this);
            if (!ckPass) return;
            this.favBy=this.favModuleEnum[this.tab];
            if(this.favBy=='IMG'){
                this.foldertype=0;
                this.currentIds=[item.id];
                this.favId='';
            }else{
                this.foldertype=1;
                this.currentIds=[];
                this.favId=item.id;
            }
            this.showFav = true;
        },
        onFavSucc(){
            if(this.favBy=='IMG'){
                let that=this;
                this.rankList.map(item=>{
                    if(that.currentIds.includes(item.id)){
                        item.collect_count+=1;
                    }
                })
                that.currentIds=[];
            }else{
                let that=this;
                this.rankList.map(item=>{
                    if(that.favId==item.id){
                        item.collect_count+=1;
                    }
                })
                that.currentIds=[];
            }
            this.showFav=false;
        },
        onInfoClose() {
            window.history.pushState({}, 0, this.curFullPath);
            document.body.style.overflow = 'inherit';
            this.showInfo = false;
        },
        handleShowInfo(idx,_item) {
            this.curViewidx=idx;
            this.curFullPath =location.href.substring(location.href.lastIndexOf('/'));
            let _pageType=this.pageTypeEnum[this.tab];
            this.currentId = _item.id;
            if(!_item.id)return;
            if(!_pageType){
                localStorage.setItem('FOL-BACK-P',this.$router.currentRoute.fullPath);
                this.$router.push({ path: this.nextPageEnum[_item.type] + '/' + _item.id })
                return;
            }
            if(_pageType=='img'){
                this.currentImgUrl=this.$imgdomainurl+_item.id+'.webp'
                this.showImg=true;
                window.history.pushState({}, 0, '/imgv/' + _item.id)
                return;
            }
            let routeData = this.$router.resolve({
                path: '/'+_pageType+'/'+_item.id
            })
            window.open(routeData.href, '_blank')
            // this.pageType = _pageType;
            // document.body.style.overflow = 'hidden';
            // window.history.pushState({}, 0, '/' + _pageType + '/' + _item.id);
            // this.showInfo = true;
        },
        onPrev() {
            if (this.currentIdx == 0) {
                this.$amessage.warn('没有更多了')
                return;
            }
            this.currentIdx--;
            this.currentId = this.rankList[this.currentIdx].id;
        },
        onNext() {
            if (this.currentIdx == this.works.length - 1) {
                this.$amessage.warn('没有更多了')
                return;
            }
            this.currentIdx++;
            this.currentId = this.rankList[this.currentIdx].id;
        },
        handleSearch(){
            $('body,html').animate({
                'scrollTop':0
            },0);
            this.hasRankMore=true;
            this.rankParams.pageNum=1;
            this.scrollRankLoaded=false;
            this.rankParams.last='';
            this.queryRanks();
        },
        loadMoreMember(e){
            let spacNum = e.target.scrollHeight - ($(e.target).scrollTop() + $(e.target).height())
            if(this.scrollLoaded==false)return;
            if (spacNum < 1 && this.hasMore) {
                this.handleLoadingMore()
            }
        },
        chooseTab(_tab){
            this.tab=_tab;
            $('body,html').animate({
                'scrollTop':0
            },0);
            this.handleSearch();
            window.history.pushState({}, 0, '/rank?t=' + _tab);
        },
        loadError(e){
            e.target.removeAttribute('srcset');
        },
        toUcenter(id) {
            let routeData = this.$router.resolve({ path: "/user/" + id });
            window.open(routeData.href, '_blank');
        },
        handleLoadingMore() {
            this.params.pageNum++
            this.queryList()
        },
        async handleFollow(item) {
            let ckPass = this.$bhelper.checkLogin(this);
            if (!ckPass) return;
            if (item.isSubscribe > 0) {
                let res = await api.cancelFollowTo(item.id);
                if (res.code == 0) {
                    item.isSubscribe = 0;
                    this.$amessage.success('已取消，有缘再见～')
                }
            }
            else {
                let res = await api.followTo(item.id);
                if (res.code == 0) {
                    this.$bhelper.addCirRecord('FOLLOW');
                    this.$store.dispatch('setLeftMenu',[])
                    item.isSubscribe = 1;
                    this.$amessage.success('关注+1，灵感不断！')
                }
            }
        },
        async queryList() {
            let that = this;
            this.isLoading=true;
            let result = await api.membersRank(this.params);
            this.isLoading=false;
            if (that.params.pageNum == 1) {
                that.list = [];
            }
            result.data.map(item=>{
                let _vtime=null;
                if(item.updateTime){
                    _vtime=item.updateTime;
                }else if(item.createTime){
                    _vtime=item.createTime;
                }else if(item.create_time){
                    _vtime=item.create_time.replace('T',' ');
                }
                _vtime=Math.abs(new Date(_vtime).getTime());
                item.lazy = {
                    src:that.$imgdomainurl+'avatar-'+item.id+'-'+_vtime+'@1x60.webp',
                    error: require('@/assets/pro/default_sys_img.svg'),
                    loading: require('@/assets/l_error_'+(localStorage.getItem('THM-STY')?localStorage.getItem('THM-STY'):'light')+'.png')
                }
                let srcsets=[];
                srcsets.push(that.$imgdomainurl+'avatar-'+item.id+'-'+_vtime+'@1x60.webp 1x');
                srcsets.push(that.$imgdomainurl+'avatar-'+item.id+'-'+_vtime+'@2x60.webp 2x');
                srcsets.push(that.$imgdomainurl+'avatar-'+item.id+'-'+_vtime+'@3x60.webp 3x');
                item.srcsets=srcsets.join(',')
            })
            this.list = [...this.list, ...result.data];

            let totalPage = result.total % that.params.pageSize == 0 ? result.total / that.params.pageSize : parseInt(result.total / that.params.pageSize) + 1
            if (this.list.length==1000) {
                that.hasMore = false
            } else {
                that.hasMore = true
            }
            that.scrollLoaded = true
        },
        async queryRanks(){
            let params=Object.assign({},this.rankParams);
            if(params.pageNum==1){
                this.rankList=[{},{},{},{},{},{},{},{},{}];
            }
            this.rankLoading=true;
            let res=await api.getRanks(this.rankType[this.tab],params);
            this.rankLoading=false;
            if(params.pageNum==1){
                this.rankList=[];
            }
            let domainUrl=this.$imgdomainurl;
            let datas=res.data[this.rankType[this.tab]].list;
            if(datas.length>0)
                this.rankParams.last=datas[datas.length-1].id;
            let that=this;
            if(that.tab==2){
                datas.map(item=>{
                    item.thumbnailBean={id:item.id};
                    item.ratios=[]
                let _vtime=null;
                if(item.updateTime){
                    _vtime=item.updateTime;
                }else if(item.createTime){
                    _vtime=item.createTime;
                }else if(item.create_time){
                    _vtime=item.create_time.replace('T',' ');
                }
                _vtime=Math.abs(new Date(_vtime).getTime());
                item.lazy = {
                    src:that.$imgdomainurl+item.id+'-'+_vtime+'@1x176.webp',
                    error: require('@/assets/l_error_'+(localStorage.getItem('THM-STY')?localStorage.getItem('THM-STY'):'light')+'.png'),
                    loading: require('@/assets/l_error_'+(localStorage.getItem('THM-STY')?localStorage.getItem('THM-STY'):'light')+'.png')
                }
                let srcsets=[];
                srcsets.push(that.$imgdomainurl+item.id+'-'+_vtime+'@1x176.webp 1x');
                srcsets.push(that.$imgdomainurl+item.id+'-'+_vtime+'@2x176.webp 2x');
                srcsets.push(that.$imgdomainurl+item.id+'-'+_vtime+'@3x176.webp 3x');
                item.srcsets=srcsets.join(',')
            })
            }
            else if(that.tab==5){
                datas.map(item=>{
                    if(item.covers)
                    {
                        item.covers.map(f=>{
                            let _vtime = null;
                            if (item.updateTime) {
                                _vtime = item.updateTime;
                            } else if (item.createTime) {
                                _vtime = item.createTime;
                            } else if (item.create_time) {
                                _vtime = item.create_time.replace('T', ' ');
                            }
                            _vtime = Math.abs(new Date(_vtime).getTime());
                            let srcsets = [];
                            let pref=item.type==1?'article-'+f.id:f.id;
                            srcsets.push(domainUrl +pref + '-' + _vtime + '@1x432.webp 1x');
                            srcsets.push(domainUrl +pref + '-' + _vtime + '@2x432.webp 2x');
                            srcsets.push(domainUrl +pref + '-' + _vtime + '@3x432.webp 3x');
                            f.srcsets = srcsets.join(',')
                            f.lazy = {
                                src: domainUrl +pref + '-' + _vtime + '@1x432.webp',
                                error: require('@/assets/l_error_'+(localStorage.getItem('THM-STY')?localStorage.getItem('THM-STY'):'light')+'.png'),
                                loading: require('@/assets/l_error_'+(localStorage.getItem('THM-STY')?localStorage.getItem('THM-STY'):'light')+'.png')
                            }
                        })
                    }
                })
            }
            else{
                datas.map(item=>{
                let _vtime=null;
                if(item.updateTime){
                    _vtime=item.updateTime;
                }else if(item.createTime){
                    _vtime=item.createTime;
                }else if(item.create_time){
                    _vtime=item.create_time.replace('T',' ');
                }
                _vtime=Math.abs(new Date(_vtime).getTime());
                item.lazy = {
                    src:that.$imgdomainurl+'article-'+item.id+'-'+_vtime+'@1x176.webp',
                    error: require('@/assets/l_error_'+(localStorage.getItem('THM-STY')?localStorage.getItem('THM-STY'):'light')+'.png'),
                    loading: require('@/assets/l_error_'+(localStorage.getItem('THM-STY')?localStorage.getItem('THM-STY'):'light')+'.png')
                }
                let srcsets=[];
                srcsets.push(that.$imgdomainurl+'article-'+item.id+'-'+_vtime+'@1x176.webp 1x');
                srcsets.push(that.$imgdomainurl+'article-'+item.id+'-'+_vtime+'@2x176.webp 2x');
                srcsets.push(that.$imgdomainurl+'article-'+item.id+'-'+_vtime+'@3x176.webp 3x');
                item.srcsets=srcsets.join(',')
            })
            }
            this.hasRankMore=this.rankParams.pageNum<10;
            this.rankList=[...this.rankList,...datas];

            setTimeout(()=>{
                that.scrollRankLoaded=true;
            },1200)
        },
        loadMore() {
            this.rankParams.pageNum++
            this.queryRanks()
        },
        docScroll(e){
            this.scrollPosition=e.currentTarget.scrollY;
            let that = this;
            let jHeight = document.documentElement.scrollHeight - document.documentElement.scrollTop - document.documentElement.clientHeight;

            if (that.scrollRankLoaded == false) return;
            if (jHeight <= 200 && that.hasRankMore) {
                
                that.scrollRankLoaded = false
                that.loadMore()
            }
        }
    },
    destroyed() {
        window.removeEventListener('scroll', this.docScroll);
    },
    activated(){
        window.addEventListener('scroll', this.docScroll);
        let that=this;
        this.$nextTick(() => {
            window.scrollTo(0,that.scrollPosition)
        });
    },
    deactivated(){
        window.removeEventListener('scroll', this.docScroll);
    },
    mounted() {
        let _gTypes = localStorage.getItem('G-TYPES');
        if(_gTypes){
            this.allGTypes = JSON.parse(decodeURIComponent(_gTypes));
        }
        if(this.$route.query.t){
            this.tab=this.$route.query.t;
        }
        let _allCateTypes=JSON.parse(decodeURIComponent(localStorage.getItem('OBJ-CATE-ALL-TYPES')));
        this.styles=[{value:'',title:'全部风格'}].concat(_allCateTypes.styles);
        let token = localStorage.getItem('token');
        if (token) {
            this.params.userId = localStorage.getItem('userId')
        }
        this.queryList();

        this.queryRanks();
    }

}
</script>

<style scoped lang="less">
.rank-page {
    padding-left: 245px;
    display:flex;
    justify-content: space-between;
    width:100%;
    .top {
        display: flex;
        align-items: center;
        justify-content: space-between;

        .left-back {
            background: url('../assets/pro/back_btn_icon.svg') no-repeat;
            width: 44px;
            height: 44px;
            display: block;
            transition: .2s all linear;

            &:hover {
                background: url('../assets/pro/gminfo_topback_hover.svg') no-repeat;
                background-size: cover;
            }
        }

        .my-publish {
            line-height: 40px;
            background: #1C1C1E;
            color: #fff;
            border-radius: 8px;
            text-align: center;
            width: 96px;
            font-size: 14px;
        }
    }
    .rank-l{
        max-width:730px;
        min-width:60%;
        // width:100%;
        // margin-right:250px;
        .top{
            display: flex;
            flex-direction: column;
            width:100%;
            position: sticky;
            // background:#111;
            top:84px;
            padding-bottom:10px;
            z-index:1;
        }
        .top-line{
            display: flex;
            justify-content:space-between;
            width:100%;
            .filter{
                display: flex;
                grid-gap:10px;
            }
            .top-tabs{
                display: flex;
                grid-gap:30px;
                font-size:24px;
                color:#969696;
                transition:font-size .2s ease;
                align-items: center;
                a{
                    position: relative;
                    line-height:33px;
                    height:33px;
                    &.active{
                        color:#fff;
                        font-size:26px;
                        &:after{
                            content:'';
                            height:2px;
                            background:#11CCB1;
                            width:24px;
                            position: absolute;
                            bottom:-4px;
                            left:calc((100% - 24px) / 2);
                        }
                    }
                }
            }
        }
        .top-mini-tip{
            font-size: 12px;
            color: #969696;
            line-height: 17px;
            text-align: center;
            margin-top:30px;
        }
        .content-list-area{
            display: flex;
            flex-direction:column;
            grid-gap:20px;
            margin-top:21px;
            .item{
                min-height:112px;
                padding:26px 26px 26px 28px;
                border-radius:18px;
                // background:#171717;
                display: flex;
                align-items: center;
                justify-content: space-between;
                transition:background-color .2s ease;
                &:hover{
                    background:#1e1e1e;
                    cursor: pointer;
                    .basic{
                        .title{
                            color:#11CCB1;
                        }
                    }
                }
                .sort-num{
                    margin-right:27px;
                    line-height:38.5px;
                    text-align: center;
                    font-size:18px;
                    min-width:55px;
                    &.sort_1{
                        background:url('../assets/pro/sort_1.svg') no-repeat;
                        padding-top:6px;
                    }
                    &.sort_2{
                        background:url('../assets/pro/sort_2.svg') no-repeat;
                        padding-top:6px;
                    }
                    &.sort_3{
                        background:url('../assets/pro/sort_3.svg') no-repeat;
                        padding-top:6px;
                    }
                }
                .center-box{
                    display: flex;
                    grid-gap:20px;
                    min-width:calc(100% - 55px - 27px - 120px);
                    width:calc(100% - 55px - 27px - 120px);
                    .img-box{
                        width:88px;height:60px;
                        border-radius:10px;
                        overflow: hidden;
                        background:#242327;
                        img{
                            width:100%;
                            height:100%;
                            object-fit: cover;
                        }
                        &:hover{
                            img{
                                transform: scale(1.08);
                            }
                        }
                    }
                    .c-img-box{
                        display: flex;
                        height:59px;
                        align-items: center;
                        grid-gap:1px;
                        .img-one{
                            min-width:57.54px;
                            max-width:57.54px;
                            height:100%;
                            border-radius:5px;
                            overflow: hidden;
                            background:#242327;
                            img{
                                width:100%;
                                height:100%;
                                object-fit:cover;
                            }
                        }
                        .img-rs{
                            display: flex;
                            flex-direction:column;
                            grid-gap:1px;
                            .ccimg-box{
                                width:29px;
                                
                                height:29px;
                                background:#242327;
                                border-radius:5px;
                                overflow: hidden;
                                img{
                                    width:100%;
                                    height:100%;
                                    object-fit:cover;
                                }
                            }
                        }
                    }
                    .basic{
                        max-width:70%;
                        width:100%;
                        display: flex;
                        flex-direction: column;
                        justify-content: space-between;
                        .title{
                            font-size:16px;
                            white-space: nowrap;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            transition:color .1s ease;
                            display: block;
                            min-height:21px;
                            &:hover{
                                text-decoration:underline;
                            }
                        }
                        .bot{
                            // margin-top:14px;
                            display: flex;
                            justify-content: space-between;
                            color:#969696;
                            .tags{
                                font-size:12px;
                            }
                            .img-emoji-nums{
                                display: flex;
                                grid-gap:13px;
                                .icon{
                                    color:#969696;
                                    padding-left:25px;
                                    font-style: normal;
                                    font-size:12px;
                                    display: flex;
                                    align-items: center;
                                    min-width:40px;
                                }
                                
                                .emoj-18{
                                    background:url('../assets/pro/emoj/18.svg') no-repeat;
                                    background-size:20px 20px;
                                    background-position:left center;
                                }
                                .emoj-10{
                                    background:url('../assets/pro/emoj/10.svg') no-repeat;
                                    background-size:20px 20px;
                                    background-position:left center;
                                }
                                .emoj-16{
                                    background:url('../assets/pro/emoj/16.svg') no-repeat;
                                    background-size:20px 20px;
                                    background-position:left center;
                                }
                                .emoj-6{
                                    background:url('../assets/pro/emoj/6.svg') no-repeat;
                                    background-size:20px;
                                    background-position:left center;
                                }
                                .emoj-24{
                                    background:url('../assets/pro/emoj/24.svg') no-repeat;
                                    background-size:20px 20px;
                                    background-position:left center;
                                }
                            }
                            .work-tags{
                                display: flex;
                                grid-gap:17px;
                                .tag{
                                    background:#242327;
                                    border-radius:10px;
                                    line-height:19px;
                                    padding:0px 10px;
                                    white-space: nowrap;
                                    overflow: hidden;
                                    text-overflow: ellipsis;
                                    max-width:70px;
                                }
                            }
                            .folder{
                                display: flex;
                                align-items: center;
                                font-size:12px;
                                grid-gap:12px;
                                .f-type-row{
                                    padding:0px;
                                    height:19px;
                                    .f-type{
                                        line-height:19px;
                                    }
                                }
                            }
                            .see{
                                background: url('../assets/pro/z_number.svg') no-repeat;
                                padding-left: 18px;
                                color:#11CCB1;
                            }
                        }
                    }
                }
                .ops{
                    display: flex;
                    grid-gap:20px;
                    min-width:120px;
                    justify-content: flex-end;

                    /deep/ .el-popover__reference-wrapper{
                        display: flex;
                    }
                    
                    a{
                        border-radius:10px;
                        width:50px;height:50px;
                        text-align: center;
                        padding-top:28px;
                        font-size:12px;
                        position: relative;
                    }
                    .collect{
                        background-color: rgba(228, 36, 82, 0.2);
                        background-image:url('../assets/pro/un_favicon.svg');
                        background-repeat:no-repeat;
                        background-position:center 5px;
                        transition:background-color .1s ease;
                        &:hover{
                            background-color:#11CCB1;
                        }
                    }
                    .fav{
                        background-color:#242327;
                        background-image:url('../assets/pro/img_like.svg');
                        background-repeat:no-repeat;
                        background-position:center 5px;
                        transition:background-color .1s ease;
                        &.active{
                            background-image: url('../assets/pro/icon_liked.svg');
                            background-repeat: no-repeat;
                            background-size: 20px;
                            background-position:center 5px;
                        }
                        &:not(.active):hover{
                            background-color:#11CCB1;
                        }
                    }

                    .atn{
                        padding-top:0px;
                        display:flex;
                        justify-content: center;
                        align-items: center;
                        flex-direction: column;
                        transition:.2s all linear;
                        i{
                            font-style: normal;
                            margin-top:2px;
                        }

                        &.active{
                            background:#29272F;
                            &:hover{
                                background:#373737;
                            }
                        }
                        &:not(.active){
                            background: rgba(228, 36, 82, 0.2);
                            &:hover{
                                background:#0fab94;
                            }
                        }
                    }
                }
            }
        }
    }
    .rank-r{
        max-width:346px;
        min-width:346px;
        max-height: calc(100vh - 110px);
        
        overflow-y:auto;
        overflow-x:hidden;
        position: sticky;
        top:84px;
        .panel-tit{
            font-size:26px;
            color:#fff;
            margin-bottom:10px;
        }
        &:hover{
            &::-webkit-scrollbar {
                display: block;
            }
        }
        &::-webkit-scrollbar {
            display: none;
        }
    }
    .sub-logo {
        background: url('../assets/pro/icon_rank.png') no-repeat;
        background-size: 60px 60px;
        background-position: center center;
        height: 60px;
    }

    .sub-tit {
        font-size: 30px;
        margin-top: 20px;
        line-height: 42px;
        text-align: center;
    }

    .tit {
        font-size: 16px;
        color: #969696;
        text-align: center;
        margin-top: 16px;
    }

    .list-box {
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
        max-width: 960px;
        // margin: 32px auto 0px auto;
        // grid-gap: 20px;
        // background:#171717;
        border-radius:16px;
        min-width:346px;
        .list-item {
            // background: #171717;
            border-radius: 8px;
            padding: 13px 14px;
            width:100%;
            min-width:100%;
            // margin-bottom:20px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            // border: 2px solid transparent;
            transition: .1s all linear;
            cursor: pointer;
            min-height: 78px;

            &.no-data {
                background: #1D1D1F;
            }

            &:hover {
                // border-color:#11CCB1;
            }

            // &:nth-child(2n){
            //     margin-left:20px;
            // }
            .left {
                display: flex;
                align-items: center;

                .img-box {
                    width: 48px;
                    height: 48px;
                    min-width: 48px;
                    border-radius: 48px;
                    overflow: hidden;
                    margin-right: 15px;
                    &:hover{
                        img{
                            transform: scale(1.08);
                        }
                    }
                    img {
                        width: 100%;
                        height: 100%;
                    }
                }

                .basic {
                    span {
                        // display: block;
                    }

                    .name {
                        font-size: 16px;
                        font-weight: 500;
                        &:hover{
                            color:#11CCB1;
                            text-decoration: underline;
                        }
                    }

                    .nums {
                        display: flex;
                        align-items: center;
                        grid-gap: 20px;

                        .num {
                            font-size: 14px;
                            color: #969696;
                            margin-top: 6px;
                            cursor: default;

                            i {
                                font-style: normal;
                                color: #fff;
                                margin-left: 5px;
                            }
                        }
                    }
                }
            }

            .follow-btn {
                width: 68px;
                text-align: center;
                line-height: 36px;
                border-radius: 8px;
                background: rgba(228, 36, 82, 0.2);
                color: #fff;
                // font-size: 16px;
                user-select: none;
                transition: .1s all linear;

                &:not(.active):hover {
                    background: #0fab94;
                }

                &.active {
                    background: #29272F;

                    &:hover {
                        background: #373737;
                    }
                }
            }
        }
    }
}
</style>